<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div id="main">
			<div class="head">
				<img src="img/logo1.png"/>
			</div>
			<div class="main">
				<div class="left">
					<ul>
						<li :class="{selected:selected==1}" v-on:click="gopage(1),wudetails=false">首页</li>
						<li :class="{selected:selected==2}" v-on:click="gopage(2),sebeidetails=false">养老五件套</li>
						<li :class="{selected:selected==3}" v-on:click="gopage(3),wudetails=false">体检社备</li>
						<li :class="{selected:selected==4}" v-on:click="gopage(4)">定位硬件</li>
					</ul>
				</div>
				<!--首页-->
				<div class="right" v-if="selected==1">
					<div class="righthead">
						<ul>
							<li>
								<img class="f-left" src="img/01.png"/>
								<div class="f-left PL10">
									<p class="PT10">已处理</p>
									<p><span style="font-size: 24px;color:#60aae8;">{{Havedeal}}</span>次</p>
								</div>
							</li>
							<li>
								<img class="f-left" src="img/02.png"/>
								<div class="f-left PL10">
									<p class="PT10">未处理</p>
									<p><span style="font-size: 24px;color:#eb9731;">{{undeal}}</span>次</p>
								</div>
							</li>
							<li>
								<img class="f-left" src="img/03.png"/>
								<div class="f-left PL10">
									<p class="PT10">今日报警数</p>
									<p><span style="font-size: 24px;color:#f676a6;">{{alarmnumber}}</span>次</p>
								</div>
							</li>
							<li>
								<img class="f-left" src="img/04.png"/>
								<div class="f-left PL10">
									<p class="PT10">在线设备数</p>
									<p><span style="font-size: 24px;color:#21cadd;">{{Onlinenumber}}</span>次</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="rightmid">
						<p class="PL20 PT15"><img src="img/05.png"/>警报：张德“离开设定范围”地址：徐汇区桂林路255号6号楼501室 请速查看！</p>
					</div>
					<div class="rightfoot">
						<div class="formlist PT20">
							<table border="2" cellpadding="10">
							  <tr>
							    <th>设备类型</th>
							    <th>报警信息</th>
							    <th>报警人</th>
							    <th>地址</th>
							    <th>状态</th>
							    <th>报警时间</th>
							    <th>操作</th>
							  </tr>
							
							  <tr v-for="item in tabulardata">
							    <td>{{item.equipment}}</td>
							    <td>{{item.alarminfor}}</td>
							    <td>{{item.policeman}}</td>
							    <td>{{item.address}}</td>
							    <td class="red" v-if="item.eqstate==1">报警中</td>
							    <td v-else="">报警中</td>
							    <td>{{item.alarmtime}}</td>
							    <td><button class="details">查看详情</button></td>
							  </tr>
							</table>
							<ul class="footpage">
								<li class="f-left">共{{Totalpage}}页 每页&nbsp;&nbsp;<span class="pageboder">&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;条&nbsp;&nbsp;<span class="pageboder" v-on:click="gotablepage(1)">&nbsp;&nbsp;首页&nbsp;&nbsp;</span>&nbsp;&nbsp;<span class="pageboder" v-on:click="gotablepage('up')">&nbsp;&nbsp;上一页&nbsp;&nbsp;</span>&nbsp;&nbsp;<span class="pageboder" v-on:click="gotablepage('next')">&nbsp;&nbsp;下一页&nbsp;&nbsp;</span>&nbsp;&nbsp;<span class="pageboder"  v-on:click="gotablepage(Totalpage)">&nbsp;&nbsp;尾页&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;当前{{current}}/{{Totalpage}}页&nbsp;&nbsp;&nbsp;&nbsp;跳转到第&nbsp;&nbsp;<input type="number" v-model="jumppage"/>&nbsp;&nbsp;<span v-on:click="gotablepage(jumppage)">跳转</span></li>
							</ul>
						</div>
					</div>
				</div>
				<!--养老五件套-->
				<div class="right" v-if="yanglaowu">
					<div class="righthead">
						<ul>
							<li>
								<img class="f-left" src="img/01.png"/>
								<div class="f-left PL10">
									<p class="PT10">已处理</p>
									<p><span style="font-size: 24px;color:#60aae8;">{{Havedeal}}</span>次</p>
								</div>
							</li>
							<li>
								<img class="f-left" src="img/02.png"/>
								<div class="f-left PL10">
									<p class="PT10">未处理</p>
									<p><span style="font-size: 24px;color:#eb9731;">{{undeal}}</span>次</p>
								</div>
							</li>
							<li>
								<img class="f-left" src="img/03.png"/>
								<div class="f-left PL10">
									<p class="PT10">今日报警数</p>
									<p><span style="font-size: 24px;color:#f676a6;">{{alarmnumber}}</span>次</p>
								</div>
							</li>
							<li>
								<img class="f-left" src="img/04.png"/>
								<div class="f-left PL10">
									<p class="PT10">在线设备数</p>
									<p><span style="font-size: 24px;color:#21cadd;">{{Onlinenumber}}</span>次</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="rightmid">
						<p class="PL20 PT15"><img src="img/05.png"/>警报：张德“离开设定范围”地址：徐汇区桂林路255号6号楼501室 请速查看！</p>
					</div>
					<div class="rightfoot">
						<div class="shebeiid">
							<span>设备ID</span>
							<input type="text" name="" id="" value="" placeholder="请输入ID" v-model="DeviceID"/>
							&nbsp;&nbsp;
							<span>客户姓名：</span>
							<input type="text" name="" id="" value="" placeholder="请输入客户姓名" v-model="customername"/>
							&nbsp;&nbsp;
							<span>地址信息：</span>
							<input type="text" name="" id="" value=""  placeholder="请输入地址信息" v-model="addressxc"/>
							&nbsp;&nbsp;
							<button v-on:click="Thequery">查询</button>
						</div>
						<div class="formlist2 PT20">
							<table border="2" cellpadding="10">
							  <tr>
							    <th>设备ID</th>
							    <th>报警信息</th>
							    <th>报警人</th>
							    <th>地址</th>
							    <th>状态</th>
							    <th>报警时间</th>
							    <th>操作</th>
							  </tr>
							
							  <tr v-for="item in tabulardata2">
							    <td>{{item.equipment}}</td>
							    <td>{{item.alarminfor}}</td>
							    <td>{{item.policeman}}</td>
							    <td>{{item.address}}</td>
							    <td class="red" v-if="item.eqstate==1">报警中</td>
							    <td v-else="">报警中</td>
							    <td>{{item.alarmtime}}</td>
							    <td><button class="details" v-on:click="wudetails=true">查看详情</button></td>
							  </tr>
							</table>
							<ul class="footpage">
								<li class="f-left">共6页 每页&nbsp;&nbsp;<span class="pageboder">&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;条&nbsp;&nbsp;<span class="pageboder">&nbsp;&nbsp;首页&nbsp;&nbsp;</span>&nbsp;&nbsp;<span class="pageboder">&nbsp;&nbsp;上一页&nbsp;&nbsp;</span>&nbsp;&nbsp;<span class="pageboder">&nbsp;&nbsp;下一页&nbsp;&nbsp;</span>&nbsp;&nbsp;<span class="pageboder">&nbsp;&nbsp;尾页&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;当前3/6页&nbsp;&nbsp;&nbsp;&nbsp;跳转到第&nbsp;&nbsp;<input type="text" />&nbsp;&nbsp;跳转</li>
							</ul>
						</div>
					</div>
				</div>
				<!--体验设备-->
				<div class="right" v-if="tiyansb">
					<div class="righthead" style="height: 70px;">
						<div class="shebeiid">
							<span>设备ID</span>
							<input type="text" name="" id="" value="" v-model="DeviceID"/>
							&nbsp;&nbsp;
							<span>客户姓名：</span>
							<input type="text" name="" id="" value=""  v-model="customername"/>
							&nbsp;&nbsp;
							<span>地址信息：</span>
							<input type="text" name="" id="" value="" v-model="addressxc"/>
							&nbsp;&nbsp;
							<button v-on:click="Thequery">查询</button>
						</div>
					</div>
					<div class="rightmid">
						<p class="PL20 PT15"><img src="img/05.png"/>警报：张德“离开设定范围”地址：徐汇区桂林路255号6号楼501室 请速查看！</p>
					</div>
					<div class="rightfoot">
						<div class="formlist2 PT20">
							<table border="2" cellpadding="10">
							  <tr>
							    <th>设备ID</th>
							    <th>报警信息</th>
							    <th>报警人</th>
							    <th>地址</th>
							    <th>状态</th>
							    <th>报警时间</th>
							    <th>操作</th>
							  </tr>
							
							  <tr v-for="item in tabulardata3">
							    <td>{{item.equipment}}</td>
							    <td>{{item.alarminfor}}</td>
							    <td>{{item.policeman}}</td>
							    <td>{{item.address}}</td>
							    <td class="red" v-if="item.eqstate==1">报警中</td>
							    <td v-else="">报警中</td>
							    <td>{{item.alarmtime}}</td>
							    <td><button class="details" v-on:click="opensebeidetails">查看详情</button></td>
							  </tr>
							</table>
							<ul class="footpage">
								<li class="f-left">共6页 每页&nbsp;&nbsp;<span class="pageboder">&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;条&nbsp;&nbsp;<span class="pageboder">&nbsp;&nbsp;首页&nbsp;&nbsp;</span>&nbsp;&nbsp;<span class="pageboder">&nbsp;&nbsp;上一页&nbsp;&nbsp;</span>&nbsp;&nbsp;<span class="pageboder">&nbsp;&nbsp;下一页&nbsp;&nbsp;</span>&nbsp;&nbsp;<span class="pageboder">&nbsp;&nbsp;尾页&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;当前3/6页&nbsp;&nbsp;&nbsp;&nbsp;跳转到第&nbsp;&nbsp;<input type="text" />&nbsp;&nbsp;跳转</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- 五件套详情-->
				<div class="right" v-if="yanglaowuxiang">
					<div class="righthead5">
						<ul>
							<li>
								<img class="f-left" src="img/08.png"/>
								<div class="f-left PL10">
									<p class="PT10">ID: <span>{{mattressID}}</span></p>
									<p>在床：<span>{{mattressstyle}}</span></p>
									<p>心率：<span>{{mattressthree}}</span></p>
								</div>
							</li>
							<li>
								<img class="f-left" src="img/09.png"/>
								<div class="f-left PL10">
									<p class="PT10">ID: <span>{{smokeID}}</span></p>
									<p>状态：<span>{{smokestyle}}</span></p>
									<p>电量：<span>{{smokestyle}}</span></p>
								</div>
							</li>
							<li>
								<img class="f-left" src="img/10.png"/>
								<div class="f-left PL10">
									<p class="PT10">ID: <span>{{fuelgasID}}</span></p>
									<p>状态：<span>{{fuelgasstyle}}</span></p>
									<p>电量：<span>{{fuelgasthree}}</span></p>
								</div>
							</li>
							<li>
								<img class="f-left" src="img/11.png"/>
								<div class="f-left PL10">
									<p class="PT10">ID: <span>{{doorID}}</span></p>
									<p>状态：<span>{{doorstyle}}</span></p>
									<p>电量：<span>{{doorthree}}</span></p>
								</div>
							</li>
							<li>
								<img class="f-left" src="img/12.png"/>
								<div class="f-left PL10">
									<p class="PT10">ID: <span>{{infraredID}}</span></p>
									<p>状态：<span>{{infraredstyle}}</span></p>
									<p>电量：<span>{{infraredthree}}</span></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="rightmid">
						<p class="PL20 PT15"><img src="img/05.png"/>警报：张德“离开设定范围”地址：徐汇区桂林路255号6号楼501室 请速查看！</p>
					</div>
					<div class="rightfoot">
						<div class="formlist2 PT20">
							<p class="PL20 font20"> <img class="v-middle" src="img/06.png"/> 客户信息</p>
							<p class="PL20 PT20">
								<span>老人姓名：</span><span></span>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<span>性别：</span><span></span>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<span>年龄：</span><span></span>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<span>电话：</span><span></span>
							</p>
							<p class="PL20 PT10">
								<span>家庭住址：</span><span></span>
							</p>
							<p class="note">
								{{note}}
							</p>
						</div>
					</div>
				</div>
				<!--设备详情-->
				<div class="right" :class="{none: selected!=3 || !sebeidetails}">
					<div class="righthead5" style="height: 112px;">
						<p class="PL20 font20 PT20"> <img class="v-middle" src="img/06.png"/>&nbsp;&nbsp;客户信息</p>
						<p class="PL20 PT20">
							<span>客户姓名：</span><span>{{customername}}</span>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<span>客户分组：</span><span>{{customerclass}}</span>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<span>设备id：</span><span>{{customerseid}}</span>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<span>设备名称：</span><span>{{customersename}}</span>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<span>测量时间：</span>{{customertime}}<span></span>
						</p>
					</div>
					<div class="rightmid">
						<p class="PL20 PT15"><img src="img/05.png"/>警报：张德“离开设定范围”地址：徐汇区桂林路255号6号楼501室 请速查看！</p>
					</div>
					<div class="rightfoot">
						<div class="formlist3 PT20">
							<p class="PL20 font20"> <img class="v-middle" src="img/06.png"/>&nbsp;&nbsp;最新数据</p>
							<p class="PL20 PT20">
								<span>血压：</span><span>{{Bloodpressure}}</span>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<span>血糖：</span><span>{{Bloodsugar}}</span>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<span>心率：</span><span>{{Heartrate}}</span>
							</p>
						</div>
					</div>
					<ul class="echarts">
						<li ref="echartsone" id="echartsone"></li>
						<li id="echartstwo"></li>
						<li id="echartsthree"></li>
					</ul>
				</div>
			</div>
			<!--首页弹窗-->
			<div class="popup" v-if="popup">
				<div class="popupcont">
					<img class="mens" src="img/07.png"/>
					<img class="close" src="img/13.png" v-on:click="popup=false"/>
					<p class="PL15" style="padding-top: 90px;">设备类型：<span>{{equipmentone}}</span></p>
					<p class="PL15 PT10">报警信息：<span>{{alarminforone}}</span></p>
					<p class="PL15 PT10">报警人：<span>{{}}</span></p>
					<p class="PL15 PT10">地址：<span>{{policemanone}}</span></p>
					<button v-on:click="Todeal">处理</button>
				</div>
			</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
